﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>BizzBingo HtmlTemplate</title>
<link href="Content/reset-grid-text.min.css" media="all" rel="stylesheet" type="text/css" />
<link href="Content/style.css" media="all" rel="stylesheet" type="text/css" />
<style type="text/css">

	.background {
		background: #fff url(img/12_col.gif) repeat-y;
	}
	
</style>
</head>
<body>
	

<div class="grid-centered">
	<div class="box-12-expand background">
		<div class="box-12-expand">
			<div class="box-4">
				<div class="normalBox">
					<h1>
						<a href="#">BizzBingo</a>
					</h1>
					<p>
						Do you speak Management?
					</p>
				</div>
			</div>
			
			<div class="prefix-4 box-4">
				<p class="normalBox" style="text-align: right;">
					 <a href="#">Leute einladen</a> | <a href="#">Neues Spiel</a> | <a href="#">Deutsch</a>
				</p>
			</div>
		</div>
		<div class="box-12-expand">
            <div class="box-12">
			    <div class="box-3 no-margin-left">
				    <a href="#">
					    <p class="normalBox">
						    test auch ein sehr langes wort und was passiert nun?
					    </p>
				    </a>
			    </div>
			    <div class="box-3">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
			    <div class="box-3">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
			    <div class="box-3 no-margin-right">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
            </div>
            <div class="box-12">
			    <div class="box-3 no-margin-left">
				    <p class="normalBox highlightedBox">
					    test
				    </p>
			    </div>
			    <div class="box-3">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
			    <div class="box-3">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
			    <div class="box-3 no-margin-right">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
            </div>
            <div class="box-12">
			    <div class="box-3 no-margin-left">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
			    <div class="box-3">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
			    <div class="box-3">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
			    <div class="box-3 no-margin-right">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
            </div>
            <div class="box-12">
			    <div class="box-3 no-margin-left">
				    <p class="normalBox highlightedBox">
					    test
				    </p>
			    </div>
			    <div class="box-3">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
			    <div class="box-3">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
			    <div class="box-3 no-margin-right">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
            </div>
		</div>
        <div class="box-12">
            <div class="normalBox">
                <div class="box-10">
                    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="http://www.facebook.com/pages/BizzBingode/172675522770197" layout="box_count" show_faces="true" width="50"></fb:like>
                </div>
                <div class="box-1">
                    <p>
                        <a href="#">Impressum</a>
                    </p>
                </div>
            </div>
        </div>

                

		
		<div class="box-12-expand">
			<div class="box-12">
				<p class="normalBox highlightedBox">Du hast gewonnen!</p>
			</div>
		</div>
		
		<div class="box-12-expand">
			<div class="box-12">
				<p class="normalBox">Multiplayer erstellen:</p>
			</div>
		</div>
		
		<div class="box-12-expand">
			<div class="box-12">
				<div class="normalBox">
					<h1>Leute einladen</h1>
					
					<div class="box-3">
						<h2>Schritt 1:</h2>
						<p>
							Geben Sie einen Namen für die Partie ein oder starten Sie ein annonymes Spiel.	
						</p>
						<p>
							<label>Name:</label><br/>
							<input class="width-3" type="text" />
						</p>
						<p>
							<button class="width-3"> URL generieren </button>
						</p>
					</div>
					<div class="box-3">
						<h2>Schritt 2:</h2>
						<p>
						Versenden Sie disesen Link an Ihre Freunde um mit Ihnen gemeinsam zu spielen.	
						</p>
						<p>
							<label>Generierter Link:</label>
							<input class="width-3" type="text" />
						</p>
					</div>
					<div class="box-3">
						<h2>Schritt 3:</h2>
						<p>
						Über den Button fängt das Spiel an. Weitere Teilnehmer können jederzeit über den Link teilnehmen.
						</p>
						<p>	<br/>
							<button class="width-3"> Jetzt Spiel beginnen </button>
						</p>
					</div>
				</div>
			</div>
		</div>
		
		<div class="box-12-expand">
			<div class="box-12">
				<p class="normalBox">
                    Multiplayer spielen:

                </p>
			</div>
		</div>
		
		<div class="box-8-expand">
			<div class="box-8">
				<p class="normalBox">
					Dein Spielername
				</p>
			</div>
            <div class="box-8">
			    <div class="box-2 no-margin-left ">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
			    <div class="box-2">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
			    <div class="box-2">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
			    <div class="box-2 no-margin-right">
				    <a href="#">
					    <p class="normalBox">
						    Minimal-Aluminium
					    </p>
				    </a>
			    </div>
            </div>
            <div class="box-8">
			    <div class="box-2 no-margin-left">
				    <p class="normalBox highlightedBox">
					    test
				    </p>
			    </div>
			    <div class="box-2">
				    <a href="#">
					    <p class="normalBox">
						    Hier ist ein ganz langes wort
					    </p>
				    </a>
			    </div>
			    <div class="box-2">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
			    <div class="box-2 no-margin-right">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
            </div>
            <div class="box-8">
			    <div class="box-2 no-margin-left">
				    <a href="#">
					    <p class="normalBox">
						    Konzeptlosigkeit
					    </p>
				    </a>
			    </div>
			    <div class="box-2">
				    <a href="#">
					    <p class="normalBox">
						    Cloud Computing
					    </p>
				    </a>
			    </div>
			    <div class="box-2">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
			    <div class="box-2 no-margin-right">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
            </div>
            <div class="box-8">
			    <div class="box-2 no-margin-left">
				    <p class="normalBox highlightedBox">
					    test
				    </p>
			    </div>
			    <div class="box-2">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
			    <div class="box-2">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
			    <div class="box-2 no-margin-right">
				    <a href="#">
					    <p class="normalBox">
						    test
					    </p>
				    </a>
			    </div>
            </div>
		</div>
		
		<div class="box-4-expand">
			<div class="box-4">
				<p class="normalBox">Spieler Hans</p>
			</div>
			<div class="box-1">
				<p class="normalBox highlightedBox">&nbsp;</p>
			</div>
			<div class="box-1">
				<p class="normalBox">&nbsp;</p>
			</div>
			<div class="box-1">
				<p class="normalBox">&nbsp;</p>
			</div>
			<div class="box-1">
				<p class="normalBox">&nbsp;</p>
			</div>
			<div class="box-1">
				<p class="normalBox highlightedBox">&nbsp;</p>
			</div>
			<div class="box-1">
				<p class="normalBox">&nbsp;</p>
			</div>
			<div class="box-1">
				<p class="normalBox">&nbsp;</p>
			</div>
			<div class="box-1">
				<p class="normalBox highlightedBox">&nbsp;</p>
			</div>
			<div class="box-1">
				<p class="normalBox">&nbsp;</p>
			</div>
			<div class="box-1">
				<p class="normalBox">&nbsp;</p>
			</div>
			<div class="box-1">
				<p class="normalBox">&nbsp;</p>
			</div>
			<div class="box-1">
				<p class="normalBox">&nbsp;</p>
			</div>
			<div class="box-1">
				<p class="normalBox">&nbsp;</p>
			</div>
			<div class="box-1">
				<p class="normalBox">&nbsp;</p>
			</div>
			<div class="box-1">
				<p class="normalBox highlightedBox">&nbsp;</p>
			</div>
			<div class="box-1">
				<p class="normalBox highlightedBox">&nbsp;</p>
			</div>
		</div>

		<div class="box-12-expand">
				<div class="box-4">
					<div class="normalBox">
					   <p>blalalad</p>    
					</div>
				</div>
			
				<div class="box-2">
					<div class="normalBox highlightedBox">
					   <p>12318791+</p>
					</div>
				</div>
				<div class="box-2">
					<div class="normalBox highlightedBox">
					   <p>12318791-</p>    
					</div>
				</div>
		</div>

		<div class="box-12-expand">
				<div class="box-4">
					<div class="normalBox">
					   <p>blalalad</p>    
					</div>
				</div>
			
				<div class="box-2">
					<div class="normalBox highlightedBox">
					   <p>12318791+</p>
					</div>
				</div>
				<div class="box-2">
					<div class="normalBox highlightedBox">
					   <p>12318791-</p>    
					</div>
				</div>
		</div>
		
		<div class="box-12-expand">
    <form>
	    <div class="box-4">
            <div class="normalBox">
                    <input type="text" />
            </div>
        </div>
    
        <div class="box-4">
            <div class="normalBox highlightedBox">
              <button>Suggest...</button>
            </div>
        </div>
    </form>    
</div>
		
	</div>
</div>
</body>
</html>